<template>
  <div>
    <!-- 个人主页 个人信息 我的食谱（我发布的食谱） 我的菜单（我发布的菜单） 收藏菜单
    默认收藏夹 创建收藏夹 -->

    <div class="main" :key="$route.params.id">
      <el-card class="head-card">
        <div class="bg-box">
          <div class="user-title-box">
            <div class="title-left">
              <el-avatar
                size="large"
                src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
              ></el-avatar>
              <div class="user-info">
                <h3 class="username">用户_18293749</h3>
                <span>编辑简介</span>
              </div>
            </div>

            <div class="title-right" v-if="!isMe">
              <el-button
                size="mini"
                plain
                type="danger"
                v-if="isGuanzhu"
                @click="changeGuanzhu()"
                >关注</el-button
              >
              <el-button
                size="mini"
                plain
                type="info"
                v-else
                @click="changeGuanzhu()"
                >已关注</el-button
              >
            </div>
          </div>
        </div>
        <div class="options">
          <div class="op-left">
            <div
              :class="
                $route.path.search('/shipu') < 0 &&
                $route.path.search('/caidan') < 0 &&
                $route.path.search('/shoucang') < 0
                  ? 'menu-item-active'
                  : 'menu-item'
              "
              @click="$router.push('home')"
            >
              <i></i>首页
            </div>
            <div
              :class="
                $route.path.search('/shipu') > 0
                  ? 'menu-item-active'
                  : 'menu-item'
              "
              @click="$router.push('/user/1/shipu')"
            >
              <i></i>食谱
            </div>
            <div
              :class="
                $route.path.search('/caidan') > 0
                  ? 'menu-item-active'
                  : 'menu-item'
              "
              @click="$router.push('/user/1/caidan')"
            >
              <i></i>菜单
            </div>
            <div
              :class="
                $route.path.search('/shoucang') > 0
                  ? 'menu-item-active'
                  : 'menu-item'
              "
              @click="$router.push('/user/1/shoucang')"
            >
              <i></i>收藏
            </div>
          </div>
          <div class="op-right">
            <div
              class="show-item can-active"
              @click="$router.push('/user/1/guanxi/follow')"
            >
              <span class="title">关注数</span><br />
              <span>65</span>
            </div>
            <div
              class="show-item can-active"
              @click="$router.push('/user/1/guanxi/fans')"
            >
              <span class="title">粉丝数</span><br />
              <span>10</span>
            </div>
            <div class="show-item">
              <span class="title">被赞数</span><br />
              <span>189</span>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="page-body">
        <router-view :isMe="isMe"></router-view>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // console.log(this.$route.path);
    // const str = this.$route.path
    // console.log(str.search("/shoucang"));
    // if(this.$route.params.id == 'me'){
    //   this.isMe = true;
    // }else{
    //   this.isMe = false;
    // }
  },
  data() {
    return {
      isMe: true,
      isGuanzhu: true,
    };
  },
  methods: {
    changeGuanzhu() {
      this.isGuanzhu = !this.isGuanzhu;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 960px;
  margin: 0 auto;
  .head-card {
    margin-top: 10px;
    /deep/ .el-card__body {
      padding: 0;
    }
    border: 0;

    .bg-box {
      background-image: url("/user-bg.jpg");
      background-size: cover;
      background-position: center bottom;
      height: 300px;
      width: 100%;
      position: relative;

      .user-title-box {
        height: 80px;
        width: 100%;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(
          to top,
          rgba(150, 150, 150, 1),
          rgba(255, 255, 255, 0)
        );
        border: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .el-avatar {
            margin-left: 10px;
            width: 60px;
            height: 60px;
            border: 2px solid #fff;
          }
          .user-info {
            margin-left: 12px;
            h3 {
              color: #fff;
            }
            span {
              font-size: 8px;
              color: #eee;
            }
          }
        }
        .title-right {
          display: flex;
          align-items: center;
          .el-button {
            margin: 30px;
          }
        }
      }
    }
    .options {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      .op-left {
        display: flex;
        justify-content: flex-start;
        .menu-item {
          line-height: 57px;
          padding: 0 10px;
          border-bottom: 3px solid rgba(0, 0, 0, 0);
          transition: all 0.3s;
          &:hover {
            border-bottom: 3px solid rgba(245, 133, 133, 1);
            cursor: pointer;
          }
        }
        .menu-item-active {
          line-height: 57px;
          padding: 0 10px;
          border-bottom: 3px solid rgba(245, 133, 133, 1);
          transition: all 0.3s;
        }
      }
      .op-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-content: center;
        .show-item {
          text-align: center;
          padding: 0 10px;
          color: #666;
          .title {
            font-size: 8px;
          }
        }
        .can-active:hover {
          cursor: pointer;
          color: rgba(245, 133, 133, 1);
        }
      }
    }
  }
  .page-body {
    margin-top: 10px;
  }
}
</style>

